(function () {
    $(".monitor .tabs").on("click", "a", function () {
        $(this).addClass("active").siblings("a").removeClass("active");
        // console.log($(this).index())
        $(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
    })

    // 1. 先克隆marquee里面所有的行（row）
    $(".marquee-view .marquee").each(function () {
        // console.log($(this))
        var rows = $(this).children().clone()
        $(this).append(rows)
    })
})();

// 销量图
(function () {
    var myChart = echarts.init(document.querySelector(".pie"));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [
            {
                name: '销售统计',
                type: 'pie',
                radius: ['10%', '70%'],
                center: ['50%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    {value: 22, name: "云南"},
                    {value: 28, name: "北京"},
                    {value: 25, name: "山东"},
                    {value: 25, name: "河北"},
                    {value: 32, name: "江苏"},
                    {value: 22, name: "浙江"},
                    {value: 31, name: "四川"},
                    {value: 42, name: "上海"}
                ],
                label: {
                    fontSize: 10
                },
                labelLine: {
                    length: 6,
                    length2: 8
                }
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})();

// 柱形图模块
(function () {
    var item = {
        name: '',
        value: 1200,
        itemStyle: {
            color: '#254065'
        },
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        tooltip: {
            extraCssText: 'opacity:0'
        }

    }
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".bar"));
    // 2. 指定配置和数据
    var option = {
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
                {offset: 0, color: '#00fffb'}, // 0 起始颜色
                {offset: 1, color: '#0061ce'}  // 1 结束颜色
            ]
        ),

        tooltip: {
            trigger: 'item',
        },
        grid: {
            top: '3%',
            right: '3%',
            bottom: '3%',
            left: '0%',
            containLabel: true,
            show: true,
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        xAxis: [
            {
                type: 'category',
                data: ["上海",
                    "广州",
                    "北京",
                    "深圳",
                    "合肥",
                    "",
                    "......",
                    "",
                    "杭州",
                    "厦门",
                    "济南",
                    "成都",
                    "重庆"],
                axisTick: {
                    alignWithLabel: false,
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd'
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    alignWithLabel: false,
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd'
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                }
            }
        ],
        series: [
            {
                name: '用户总数',
                type: 'bar',
                barWidth: '60%',
                data: [2100,
                    1900,
                    1700,
                    1560,
                    1400,
                    item,
                    item,
                    item,
                    900,
                    750,
                    600,
                    480,
                    240
                ]
            }
        ]
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

// 订单功能
(function () {
    // 1. 准备数据
    var data = {
        day365: {orders: '30,321,988', amount: '99882'},
        day90: {orders: '301,987', amount: '9834'},
        day30: {orders: '1,987', amount: '3834'},
        day1: {orders: '987', amount: '834'}
    }
    var $h4Order = $(".order h4:eq(0)")
    var $h4Amount = $(".order h4:eq(1)")

    $('.order').on("click", ".filter a", function () {
        $(this).addClass("active").siblings('a').removeClass('active')
        // console.log(this.dataset.type)
        // console.log(data[this.dataset.type])
        var currData = data[this.dataset.type]
        $h4Order.html(currData["orders"])
        $h4Amount.html(currData["amount"])
    })
})();

// 销售统计模块
(function () {
    var myChart = echarts.init(document.querySelector(".line"));
    var data = {
        year: {
            info: ["2099年", "2199年", "2299年", "2399年", "2499年", "2599年", "2699年", "2799年", "2899年", "2999年", "3099年", "3199年"],
            detail: [
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ],
        },


        quarter: {
            info: ["1季度", "2季度", "3季度", "4季度"],
            detail: [
                [23, 75, 12, 97],
                [43, 31, 65, 23]
            ],

        },


        month: {
            info: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            detail: [
                [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
                [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
            ],
        },

        week: {
            info: ["近1周", "近2周", "近3周", "近4周", "近5周", "近6周"],
            detail: [
                [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
                [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
            ]
        }
    };
    var option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            right: '10%',
            textStyle: {
                color: '#4c9bfd'
            }
        },
        // 设置网格样式
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },

        xAxis: {
            type: 'category',
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            },
            boundaryGap: false,  // 去除轴内间距
            // data: ["2099年","2199年","2299年","2399年","2499年","2599年","2699年","2799年","2899年","2999年","3099年","3199年"],
            data: data.year.info,
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false  // 去除刻度
            },
            axisLabel: {
                color: '#4c9bfd' // 文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            }
        },
        series: [
            {
                name: '预期销售额',
                type: 'line',
                stack: '总量',
                smooth: true,
                // data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                data: data.year.detail[0],
            },
            {
                name: '实际销售额',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: data.year.detail[1],
            },
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize()
    })

    // tab 年季月周切换
    $(".sales .caption").on("click", "a", function () {
        index = $(this).index() - 1
        $(this).addClass("active").siblings("a").removeClass("active")
        // console.log(this.dataset.type)
        // console.log(data[this.dataset.type])
        var arr = data[this.dataset.type]
        var info = arr.info
        var detail = arr.detail
        option.xAxis.data = info
        option.series[0].data = detail[0]
        option.series[1].data = detail[1]
        myChart.setOption(option);
    })

    var as = $(".sales .caption a");
    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index >= 4) index = 0;
        as.eq(index).click()
    }, 1000);

    $(".sales").hover(function () {
        clearInterval(timer)
    }, function () {
        clearInterval(timer)
        timer = setInterval(function () {
            index++;
            if (index >= 4) index = 0;
            as.eq(index).click()
        }, 1000);
    })
})();


// 销售渠道模块 雷达图
(function () {
    var myChart = echarts.init(document.querySelector(".radar"));

    var dataSH = [
        [110, 90, 80, 60, 30],
    ];

    option = {
        tooltip: {
            show: true,
            // 控制提示框组件的显示位置
            position: ["55%", "10%"],
            textStyle: {
                fontSize: 12
            },
        },
        radar: {
            indicator: [
                {name: "淘宝", max: 120},
                {name: "京东", max: 120},
                {name: "苏宁", max: 120},
                {name: "微商", max: 120},
                {name: "其他", max: 120}
            ],
            center: ["50%", "50%"],
            radius: "50%",
            shape: 'circle',
            splitNumber: 4,
            name: {
                textStyle: {
                    color: '#4c9bfd'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)',
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)'
                }
            }
        },
        series: [

            {
                name: '上海',
                type: 'radar',
                lineStyle: {
                    normal: {
                        color: '#fff',
                        // width: 1
                    }
                },
                data: dataSH,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    color: "#fff"
                },
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 10
                },
                areaStyle: {
                    color: 'rgba(238, 197, 102, 0.6)',
                }
            }

        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})();


// 销售模块 饼形图 半圆形 设置方式
(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".gauge"));
    // 2. 指定数据和配置
    var option = {
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['130%', '150%'],
                center: ['48%', '80%'],
                labelLine: {
                    show: false
                },
                silent: true,
                startAngle: 180,
                data: [
                    {
                        value: 100, itemStyle: {
                            // 颜色渐变#00c9e0->#005fc1
                            color: new echarts.graphic.LinearGradient(
                                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                0,
                                0,
                                0,
                                1,
                                [
                                    {offset: 0, color: "#00c9e0"}, // 0 起始颜色
                                    {offset: 1, color: "#005fc1"} // 1 结束颜色
                                ]
                            )
                        }
                    },
                    {value: 100, itemStyle: {color: '#12274d'}},
                    {value: 200, itemStyle: {color: 'transparent'}},
                ]
            }
        ]
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize()
    })
})();


// 全国热榜模块
(function () {
    var hotData = [
        {
            city: "北京", // 城市
            sales: "35, 279", // 销售额
            flag: true, //  上升还是下降
            brands: [
                //  品牌种类数据
                {name: "华为", num: "9,086", flag: true},
                {name: "小米", num: "8,341", flag: true},
                {name: "oppo", num: "7,407", flag: false},
                {name: "vivo", num: "6,080", flag: false},
                {name: "荣耀", num: "6,724", flag: false},
                {name: "iphone", num: "2,170", flag: true}
            ]
        },
        {
            city: "河北",
            sales: "23,252",
            flag: false,
            brands: [
                {name: "华为", num: "3,457", flag: false},
                {name: "小米", num: "2,124", flag: true},
                {name: "oppo", num: "8,907", flag: false},
                {name: "vivo", num: "6,080", flag: true},
                {name: "荣耀", num: "1,724", flag: false},
                {name: "iphone", num: "1,170", flag: false}
            ]
        },
        {
            city: "上海",
            sales: "20,760",
            flag: true,
            brands: [
                {name: "华为", num: "2,345", flag: true},
                {name: "小米", num: "7,109", flag: true},
                {name: "oppo", num: "3,701", flag: false},
                {name: "vivo", num: "6,080", flag: false},
                {name: "荣耀", num: "2,724", flag: false},
                {name: "iphone", num: "2,998", flag: true}
            ]
        },
        {
            city: "江苏",
            sales: "23,252",
            flag: false,
            brands: [
                {name: "华为", num: "2,156", flag: false},
                {name: "小米", num: "2,456", flag: true},
                {name: "oppo", num: "9,737", flag: true},
                {name: "vivo", num: "2,080", flag: true},
                {name: "荣耀", num: "8,724", flag: true},
                {name: "iphone", num: "1,770", flag: false}
            ]
        },
        {
            city: "山东",
            sales: "20,760",
            flag: true,
            brands: [
                {name: "华为", num: "9,567", flag: true},
                {name: "小米", num: "2,345", flag: false},
                {name: "oppo", num: "9,037", flag: false},
                {name: "vivo", num: "1,080", flag: true},
                {name: "荣耀", num: "4,724", flag: false},
                {name: "iphone", num: "9,999", flag: true}
            ]
        }
    ];
    var supHtml = '';
    $.each(hotData, function (index, item) {
        // console.log(item)
        supHtml += `<li class="">
                    <span>${item.city}</span>
                    <span>${item.sales}
                            <s class="${item.flag ? "icon-up" : "icon-down"}"></s>
                        </span>
                </li>
                   `
    })
    $(".sup").html(supHtml)

    // 封装render函数
    function render(curElement) {
        curElement.addClass("active").siblings("li").removeClass()
        // console.log($(this).index())
        // console.log(hotData[$(this).index()])
        // console.log(hotData[$(this).index()].brands)
        var subHtml = '';
        $.each(hotData[curElement.index()].brands, function (index, item) {
            // console.log(item);
            subHtml += `
                            <li>
                                <span>${item.name}</span>
                                <span> ${item.num}
                                <s class="${item.flag ? "icon-up" : "icon-down"}"></s>
                                </span>
                            </li>
            `
        })
        $(".sub").html(subHtml)
    }

    //当鼠标进入省份时高亮显示
    $(".province .sup").on("mouseenter", "li", function () {
        // console.log(index);
        index = $(this).index();
        render($(this))
    })
    //
    var lis = $(".province .sup li")
    lis.eq(0).mouseenter()

    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index >= 5) index = 0;
        // lis.eq(index).mouseenter()
        render(lis.eq(index))
    }, 2000);

    $(".province > .sup").hover(
        // 经过的function 清除定时器
        function () {
            clearInterval(timer)
        },
        // 否则
        function () {
            clearInterval(timer)
            timer = setInterval(function () {
                index++;
                if (index >= 5) index = 0;
                // lis.eq(index).mouseenter()
                render(lis.eq(index))
            }, 2000);
        }
    )
})();

